<template>
<div class="home-content">
    <div class="home-left">
        <div class="weather">
            <div class="weather-info">
                <h5>早上好</h5>
                <!-- {{datas.nowdata}}, -->
                <p>今天是{{datas.nowdata}},{{datas.weeks}}</p>
            </div>
            <div class="weather-icon">
                <img :src="datas.icon" alt="">
            </div>
        </div>

        <div class="project">
            <h2>当前项目</h2>
            <div class="project-content">
                <div class="project-content-conduct project-progress">
                    <h1>{{datas.doing}}</h1>
                    <p>进行中</p>
                    <div></div>
                </div>
                <div class="project-content-examine project-progress">
                    <h1>{{datas.wait}}</h1>
                    <p>待审核</p>
                    <div></div>
                </div>
                <div class="project-content-expire project-progress">
                    <h1>{{datas.today}}</h1>
                    <p>今日到期</p>
                    <div></div>
                </div>
                <div class="project-content-overdue project-progress">
                    <h1>{{datas.overdue}}</h1>
                    <p>已逾期</p>
                    <div></div>
                </div>
            </div>
        </div>
        <div class="c-news">
            <div class="c-news-title">
                <h1>消息</h1>
                <div class="c-news-title-bt">
                    <ul>
                        <li v-for="(val,index) in mynewsbt" :key="index" :class="mynewsbtsele==index?'secelt':''" @click="readmessage(index)">{{val.test}}</li>
                        <!-- <li>已读</li>
                        <li>所有</li> -->
                    </ul>
                </div>
            </div>

            <div class="c-news-content-gd" v-if="mynewsbtsele==0" @scroll="handleScroll($event)">
                <!-- <div class="c-news-content be-overdue" >
                    <div class="c-news-content-tori"> 
                        <img src="../../common/image/shanfenyuan.png" alt="">
                        <div class="c-news-content-text">
                            <h1>您有一个任务即将逾期</h1>
                            <p>登山节海报的设计登山节海报的设计登山节海</p>
                        </div>
                    </div>
                    <div class="c-news-content-newmegss">
                        <div class="c-news-content-d">
                        <span></span>
                        <span></span>
                        </div>
                        <div class="c-news-content-unmessage"></div>

                    </div>
                </div> -->
                <div class="c-news-content  "  v-for="(item,index) in homemessagedata" :key="index" @click="seemessage(item.id,index)" :class="selectmessage==index?'be-overdue':'distribution'" >
                    <div class="c-news-content-tori">
                        <img v-if="selectmessage!=index" :src="item.wxHeadImage" alt="">
                        <img  v-if="selectmessage==index" :src="item.systemHeadImage?item.systemHeadImage:item.wxHeadImage" alt="">

                        <!-- <div class="c-newv-xq-content-img"  v-if="selectmessage!=index"><img :src="item.wxHeadImage" alt=""></div>
                        <div class="c-newv-xq-content-img" v-if="selectmessage==index"><img :src="item.systemHeadImage?item.systemHeadImage:item.wxHeadImage" alt=""></div> -->
                        <div class="c-news-content-text">
                            <h1>{{item.messageTitle}}</h1>
                            <p>{{item.projectName}}</p>
                        </div>
                    </div>
                    <div class="c-news-content-newmegss">
                        <div class="c-news-content-d">
                        <span></span>
                        <span></span>
                        </div>
                        <div class="c-news-content-unmessage" v-if="item.readFlag==1"></div>


                    </div>
                </div>
                <div class="message-wu" v-if="messagelist==0">
                   <div class="message-wu-img"><img src="../../common/image/picture_msg.png" alt=""></div>
                   <div class="datas-wu-text">当前暂无消息</div>
                </div>
               

            </div>

             <div class="c-news-content-gd" v-if="mynewsbtsele==1" @scroll="handleScroll($event)">
                <div class="c-news-content  "  v-for="(item,index) in homemessagedata" :key="index" @click="seemessage(item.id,index)" :class="selectmessage==index?'be-overdue':'distribution'">
                    <div class="c-news-content-tori">
                        <img v-if="selectmessage!=index" :src="item.wxHeadImage" alt="">
                        <img  v-if="selectmessage==index" :src="item.systemHeadImage?item.systemHeadImage:item.wxHeadImage" alt="">

                        <!-- <div class="c-newv-xq-content-img"  v-if="selectmessage!=index"><img :src="item.wxHeadImage" alt=""></div>
                        <div class="c-newv-xq-content-img" v-if="selectmessage==index"><img :src="item.systemHeadImage?item.systemHeadImage:item.wxHeadImage" alt=""></div> -->
                        <div class="c-news-content-text">
                            <h1>{{item.messageTitle}}</h1>
                            <p>{{item.projectName}}</p>
                        </div>
                    </div>
                    <div class="c-news-content-newmegss">
                        <div class="c-news-content-d">
                        <span></span>
                        <span></span>
                        </div>
                        <div class="c-news-content-unmessage" v-if="item.readFlag==1"></div>


                    </div>
                </div>
                <div class="message-wu" v-if="messagelist==0">
                   <div class="message-wu-img"><img src="../../common/image/picture_msg.png" alt=""></div>
                   <div class="datas-wu-text">当前暂无消息</div>
                </div>
               

            </div>


            <div class="c-news-content-gd" v-if="mynewsbtsele==2" @scroll="handleScroll($event)">
                <div class="c-news-content  "  v-for="(item,index) in homemessagedata" :key="index" @click="seemessage(item.id,index)" :class="selectmessage==index?'be-overdue':'distribution'">
                    <div class="c-news-content-tori">
                        <img v-if="selectmessage!=index" :src="item.wxHeadImage" alt="">
                        <img  v-if="selectmessage==index" :src="item.systemHeadImage?item.systemHeadImage:item.wxHeadImage" alt="">

                        <!-- <div class="c-newv-xq-content-img"  v-if="selectmessage!=index"><img :src="item.wxHeadImage" alt=""></div>
                        <div class="c-newv-xq-content-img" v-if="selectmessage==index"><img :src="item.systemHeadImage?item.systemHeadImage:item.wxHeadImage" alt=""></div> -->
                        <div class="c-news-content-text">
                            <h1>{{item.messageTitle}}</h1>
                            <p>{{item.projectName}}</p>
                        </div>
                    </div>
                    <div class="c-news-content-newmegss">
                        <div class="c-news-content-d">
                        <span></span>
                        <span></span>
                        </div>
                        <div class="c-news-content-unmessage" v-if="item.readFlag==1"></div>


                    </div>
                </div>

                <div class="message-wu" v-if="messagelist==0">
                   <div class="message-wu-img"><img src="../../common/image/picture_msg.png" alt=""></div>
                   <div class="datas-wu-text">当前暂无消息</div>
                </div>
               

            </div>


        </div>
    </div>
    <!-- 右边标签 -->
    <div class="home-right">
        <div class="week-project-title">
            
            <div class="week-prohect-tops">
                <h1>本周项目</h1>
                <div @click="clickrq"><img src="../../common/image/xiangmunshuax.png" alt=""></div>
                
            </div>
            <!-- {{atmyproject==1?'我执行的':'我创建的'}} -->
            <div class="week-prohect-listod">
                <div class="week-genghuan" @click="projectchoiceshow"><span>{{xuanzhondezx}}</span><img src="../../common/image/icon_v.png" alt=""></div>
                <div class="week-genhuang-text" v-if="projectchoiceshows">
                    <div class="week-mydid"  v-for="(item,index ) in projectxzlists" :key="index" @click="choiceproject(index)">{{item}}</div>
                    
                </div>
            </div>
        </div>

        <div class="week-echart-sj">
            <div class="week-echart-bg">
                <echartview ref="echarts" :chartinfo="chartdatas" @echartclick="clickEven" ></echartview>



            </div>
            <div class="week-echart-xmlx">
                <div class="week-echart-xmlx-tk "  :class="myprojeckxz==0?'xmk-scetl-bj':''" @click="pojackclick(0)">
                    <div class="week-echart-xmlx-mc"><span :class="myprojeckxz==0?'xmk-scetl-yd':''"></span>进行中项目</div>
                    <div class="week-echart-xmlx-nun">{{datas.other}}</div>
                </div>
                 <div class="week-echart-xmlx-tk" :class="myprojeckxz==1?'xmk-scetl-bj':''"  @click="pojackclick(1)">
                    <div class="week-echart-xmlx-mc"><span :class="myprojeckxz==1?'xmk-scetl-yd':''"></span>已逾期项目</div>
                    <div class="week-echart-xmlx-nun">{{datas.overdues}}</div>
                </div>
                 <div class="week-echart-xmlx-tk" :class="myprojeckxz==2?'xmk-scetl-bj':''" @click="pojackclick(2)">
                    <div class="week-echart-xmlx-mc"><span :class="myprojeckxz==2?'xmk-scetl-yd':''"></span>已完成项目</div>
                    <div class="week-echart-xmlx-nun">{{datas.finish}}</div>
                </div>
                
            </div>
        </div>

        <div class="week-echart">
            <div class="week-echart-k-gd" v-if="myprojeckxz==0" >

                                            
                           <!-- <div class="week-echart-k week-echart-k-secelt"> 选中样式 -->

                <div class="week-echart-k" :class="activeright==index?'week-echart-k-secelt':''" v-for="(val,index) in datas.allList" :key="index" @click="ativiproject(index,val)">
                    
                    <div class="week-echart-k-title" >
                        <!-- <h1 class="week-echart-k-secelt-h1">{{val.projectName}}</h1> -->
                        <h1 :class="activeright==index?'week-echart-k-secelt-h1':''">{{val.projectName}}</h1>
                        <!-- <p class="week-echart-k-secelt-p">逾期2天</p> -->
                        <p :class="activeright==index?'week-echart-k-secelt-p':''">截止时间：{{val.projectEndDate}}</p>
                    </div>
                    <div class="week-echart-k-img">
                        <img src="../../common/image/icon_sh.png" alt="" v-if="val.projectStatus==0 && index != activeright">
                        <img src="../../common/image/icon_wc.png" alt="" v-if="val.projectStatus==3 && index != activeright">
                        <img src="../../common/image/icon_jz.png" alt="" v-if="val.projectStatus==2 && index != activeright">
                        <img src="../../common/image/icon_jz.png" alt="" v-if="val.projectStatus==1 && index != activeright">
                        <img src="../../common/image/icon_yq.png" alt="" v-if="val.projectStatus==4 && index != activeright">

                        <img src="../../common/image/icon_sh_b.png" alt="" v-if="val.projectStatus==0 && index == activeright">
                        <img src="../../common/image/icon_wc_b.png" alt="" v-if="val.projectStatus==3 && index == activeright">
                        <img src="../../common/image/icon_jz_b.png" alt="" v-if="val.projectStatus==2 && index == activeright">
                        <img src="../../common/image/icon_jz_b.png" alt="" v-if="val.projectStatus==1 && index == activeright">
                        <img src="../../common/image/icon_yq_b.png" alt="" v-if="val.projectStatus==4 && index == activeright">
                    </div>
                    
                </div>
                 <div class="datas-wu" v-if="datas.other==0">
                       <div><img src="../../common/image/picture_project.png" alt=""></div>
                       <div class="datas-wu-text">当前暂无项目</div>
                     </div>
                <!-- <div class="week-echart-k">
                    <div class="week-echart-k-title">
                       <h1>登山节海报设计</h1>
                        <p>逾期2天</p>
                    </div>
                    <div class="week-echart-k-img">
                        <img src="../../common/image/icon_sh.png" alt="">
                        <img src="../../common/image/icon_wc.png" alt="">
                        <img src="../../common/image/icon_jz.png" alt="">
                        <img src="../../common/image/icon_yq.png" alt="">
                    </div>
                    
                </div>
                <div class="week-echart-k">
                    <div class="week-echart-k-title">
                        <h1>登山节海报设计</h1>
                        <p>逾期2天</p>
                    </div>
                    <div class="week-echart-k-img">
                        <img src="../../common/image/icon_sh.png" alt="">
                        <img src="../../common/image/icon_wc.png" alt="">
                        <img src="../../common/image/icon_jz.png" alt="">
                        <img src="../../common/image/icon_yq.png" alt="">
                    </div>
                    
                </div>
                <div class="week-echart-k">
                    <div class="week-echart-k-title">
                        <h1>登山节海报设计</h1>
                        <p>逾期2天</p>
                    </div>
                    <div class="week-echart-k-img">
                        <img src="../../common/image/icon_sh.png" alt="">
                        <img src="../../common/image/icon_wc.png" alt="">
                        <img src="../../common/image/icon_jz.png" alt="">
                        <img src="../../common/image/icon_yq.png" alt="">
                    </div>
                    
                </div>
                <div class="week-echart-k">
                    <div class="week-echart-k-title">
                        <h1>登山节海报设计</h1>
                        <p>逾期2天</p>
                    </div>
                    <div class="week-echart-k-img">
                        <img src="../../common/image/icon_sh.png" alt="">
                        <img src="../../common/image/icon_wc.png" alt="">
                        <img src="../../common/image/icon_jz.png" alt="">
                        <img src="../../common/image/icon_yq.png" alt="">
                    </div>
                    
                </div>
                <div class="week-echart-k">
                    <div class="week-echart-k-title">
                        <h1>登山节海报设计</h1>
                        <p>逾期2天</p>
                    </div>
                    <div class="week-echart-k-img">
                        <img src="../../common/image/icon_sh.png" alt="">
                        <img src="../../common/image/icon_wc.png" alt="">
                        <img src="../../common/image/icon_jz.png" alt="">
                        <img src="../../common/image/icon_yq.png" alt="">
                    </div>
                    
                </div> -->
            </div>

             <div class="week-echart-k-gd" v-if="myprojeckxz==1">

                                            
                           <!-- <div class="week-echart-k week-echart-k-secelt"> 选中样式 -->

                <div class="week-echart-k" :class="activeright==index?'week-echart-k-secelt':''"  v-for="(val,index) in datas.overdueList" :key="index" @click="ativiproject(index,val)">
                    
                    <div class="week-echart-k-title">
                        <!-- <h1 class="week-echart-k-secelt-h1">{{val.projectName}}</h1> -->
                        <h1 :class="activeright==index?'week-echart-k-secelt-h1':''">{{val.projectName}}</h1>
                        <!-- <p class="week-echart-k-secelt-p">逾期2天</p> -->
                        <p :class="activeright==index?'week-echart-k-secelt-p':''">截止时间：{{val.projectEndDate}}</p>
                    </div>
                    <div class="week-echart-k-img">
                        <img src="../../common/image/icon_sh.png" alt="" v-if="val.projectStatus==0 && index != activeright">
                        <img src="../../common/image/icon_wc.png" alt="" v-if="val.projectStatus==3 && index != activeright">
                        <img src="../../common/image/icon_jz.png" alt="" v-if="val.projectStatus==2 && index != activeright">
                        <img src="../../common/image/icon_jz.png" alt="" v-if="val.projectStatus==1 && index != activeright">
                        <img src="../../common/image/icon_yq.png" alt="" v-if="val.projectStatus==4 && index != activeright">

                        <img src="../../common/image/icon_sh_b.png" alt="" v-if="val.projectStatus==0 && index == activeright">
                        <img src="../../common/image/icon_wc_b.png" alt="" v-if="val.projectStatus==3 && index == activeright">
                        <img src="../../common/image/icon_jz_b.png" alt="" v-if="val.projectStatus==2 && index == activeright">
                        <img src="../../common/image/icon_jz_b.png" alt="" v-if="val.projectStatus==1 && index == activeright">
                        <img src="../../common/image/icon_yq_b.png" alt="" v-if="val.projectStatus==4 && index == activeright">
                    </div>
                     
                    
                </div>
                <div class="datas-wu" v-if="datas.overdues==0">
                       <div><img src="../../common/image/picture_project.png" alt=""></div>
                       <div class="datas-wu-text">当前暂无项目</div>
                     </div>
              </div>  

              
              <div class="week-echart-k-gd" v-if="myprojeckxz==2">
                                            
                           <!-- <div class="week-echart-k week-echart-k-secelt"> 选中样式 -->

                <div class="week-echart-k" :class="activeright==index?'week-echart-k-secelt':''"  v-for="(val,index) in datas.finishList" :key="index" @click="ativiproject(index,val)">
                    
                    <div class="week-echart-k-title">
                        <!-- <h1 class="week-echart-k-secelt-h1">{{val.projectName}}</h1> -->
                        <h1 :class="activeright==index?'week-echart-k-secelt-h1':''">{{val.projectName}}</h1>
                        <!-- <p class="week-echart-k-secelt-p">逾期2天</p> -->
                        <p :class="activeright==index?'week-echart-k-secelt-p':''">截止时间：{{val.projectEndDate}}</p>
                    </div>
                    <div class="week-echart-k-img">
                        <img src="../../common/image/icon_sh.png" alt="" v-if="val.projectStatus==0 && index != activeright">
                        <img src="../../common/image/icon_wc.png" alt="" v-if="val.projectStatus==3 && index != activeright">
                        <img src="../../common/image/icon_jz.png" alt="" v-if="val.projectStatus==2 && index != activeright">
                        <img src="../../common/image/icon_jz.png" alt="" v-if="val.projectStatus==1 && index != activeright">
                        <img src="../../common/image/icon_yq.png" alt="" v-if="val.projectStatus==4 && index != activeright">

                        <img src="../../common/image/icon_sh_b.png" alt="" v-if="val.projectStatus==0 && index == activeright">
                        <img src="../../common/image/icon_wc_b.png" alt="" v-if="val.projectStatus==3 && index == activeright">
                        <img src="../../common/image/icon_jz_b.png" alt="" v-if="val.projectStatus==2 && index == activeright">
                        <img src="../../common/image/icon_jz_b.png" alt="" v-if="val.projectStatus==1 && index == activeright">
                        <img src="../../common/image/icon_yq_b.png" alt="" v-if="val.projectStatus==4 && index == activeright">
                    </div>
                     
                </div>
                <div class="datas-wu" v-if="datas.finish==0">
                       <div><img src="../../common/image/picture_project.png" alt=""></div>
                       <div class="datas-wu-text">当前暂无项目</div>
                     </div>
               
              </div> 
              



        </div>
    </div>
    <newview ref="newmessage"></newview>
    <projectmyrw ref="projectmyrw"></projectmyrw>
    <projectmycreate ref="projectmycreate"></projectmycreate>

    
      <div class="xz-rq-data" v-if="rqshow" >
                 <div class="xz-rq-data-k">
                   
                   <div class="xz-rq-data-k-nr">
                    <div class="xz-rq-data-k-text">筛选时间</div>
                        <!-- {{datassj.value}} -->
                        <div class="data1" @click="getdatafor(1)">本周项目</div>
                        <div class="data1" @click="getdatafor(2)">本月项目</div>
                        <div class="data1" @click="getdatafor(3)">今年项目</div>
                        <div class="data-sore">
                          <div class="data-start">
                          <el-date-picker
                                v-model="datassj.beginDate"
                                type="date"
                                placeholder="开始时间"
                                :default-value="new Date(2010, 9, 1)"
                              />
                          </div>
                          <div class="time-huanxian">
                            -
                          </div>
                          <div class="end-start">
                            <el-date-picker
                                v-model="datassj.endDate"
                                type="date"
                                placeholder="结束时间"
                                :default-value="new Date(2010, 9, 1)"
                              />
                          </div>
                        </div>
                          
                    </div>      

                    <div class="querenrq" @click="shaixuan">确认</div>
                    <div class="quxiaorq" @click="qunxiao">取消</div>
                </div>
      </div>        
    
</div>
  
</template>

<script>
import echartview from '@/views/echart/echart.vue'
import { ref,reactive,computed} from 'vue'
import { useStore } from 'vuex'
import {getHomePage,getWorkAssignInfo,getWorkMessagePage,getWorkMessageDetails, getProjectDetails,getWorkAssignDetails} from '../../api/api'
import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-loading.css';
import 'element-plus/theme-chalk/el-message.css';
import newview from '@/views/news/projectdetails.vue'
import projectmycreate from '@/views/project/projecttj.vue'
import projectmyrw from '@/views/project/ckprojectdetails.vue'
export default {
    data(){
        return{

        }
    },
    methods:{

    },
    components:{
        echartview,
        newview,
        projectmycreate,
        projectmyrw,
    },
    setup(){
        const store = useStore()
        const mynewsbt=[
            {test:"未读"},
            {test:"已读"},
            {test:"所有"} 
        ]
        const messagelist=ref(-1)
        const readmessage=(index)=>{
              homemessagedatas.value.pageNo=1
            mynewsbtsele.value=index
            if(mynewsbtsele.value==0){
              homemessagedatas.value.readFlag=1
              getWorkMessagePage(homemessagedatas.value).then(res=>{
                console.log(res)
               homemessagedata.value=res.page.list
               messagelist.value=res.page.list.length
            }).catch(res => {
              console.log(res)
                ElMessage({
                    message: res,
                    type: 'error',
                })
            });    
            }else if(mynewsbtsele.value==1){
              homemessagedatas.value.readFlag=0
              getWorkMessagePage(homemessagedatas.value).then(res=>{
                console.log(res)
               homemessagedata.value=res.page.list
               messagelist.value=res.page.list.length
            }).catch(res => {
              console.log(res)
                ElMessage({
                    message: res,
                    type: 'error',
                })
            }); 
            }else if(mynewsbtsele.value==2){
              homemessagedatas.value.readFlag=''
              getWorkMessagePage(homemessagedatas.value).then(res=>{
                console.log(res)
               homemessagedata.value=res.page.list
               messagelist.value=res.page.list.length

            }).catch(res => {
              console.log(res)
                ElMessage({
                    message: res,
                    type: 'error',
                })
            }); 
            }
        }
        const  messagenuncount=ref(0)
        const mynewsbtsele=ref(0)
        const echarts=ref(null)
        const datas=reactive({});
        const myprojeckxz=ref(0)
        const chartdatas=ref([])
        const homemessagedata=ref([])
        const newmessage=ref(null)
        const projectmyrw=ref(null)
        const projectmycreate=ref(null)

         const selectmessage=ref(-1)
          const seemessage =(id,index)=>{
            
            console.log(id,index)
            selectmessage.value=index
            getWorkMessageDetails({userId:localStorage.getItem('userinfoId'),workMessageId:id}).then(res=>{
                console.log(res)
                newmessage.value.getmessagedata(res)
            })
            
          }
   
      console.log( chartdatas)
      // 日期格式
      const getDateStr=(now)=>{
			var year = now.getFullYear(); // 年
			var month = now.getMonth() + 1; // 月
			var day = now.getDate(); // 日
			if(day < 10) {
				day = '0' + day;
			}
			
			if(month < 10) {
				month = '0' + month;
			}		
			return year + "-" + month + "-" + day;
       }
    
        const pojackclick =function(val){
            console.log('点击节点',val)
            
            if(myprojeckxz.value!=val){
              activeright.value=-1
              myprojeckxz.value=val
            }
           
            //      chartdatas.value= [
            //         { value: 100, name: "100%" },
            //         { value: 735, name: '1%'},
            //         { value: 580, name: '10%'},
            //     //     console.log(res.workAssignInfo.finishRatio)
                    
            //     ]
            // echarts.value.resultechart(chartdatas.value)
            echarts.value.highlight(val);
            
        }
        const clickEven=function(val){
            console.log(val)
            
              myprojeckxz.value=val
          
        }
        // console.log(localStorage.getItem('userinfoId'))


        // 首页天气及项目详情
        getHomePage({userid:localStorage.getItem('userinfoId')}).then(res=>{
            console.log(res.weather)
            datas.waether=res.weather
            datas.nowdata=res.weather.days
            datas.weeks=res.weather.week
            datas.icon=res.weather.icon
            datas.workAssignInfo=res.workAssignInfo
            datas.allList=res.workAssignInfo.allList
            datas.overdueList=res.workAssignInfo.overdueList
            datas.finishList=res.workAssignInfo.finishList
            datas.finishRatio=res.workAssignInfo.finishRatio
            datas.overdueRatio=res.workAssignInfo.overdueRatio
            datas.alls=res.workAssignInfo.all
            datas.other=res.workAssignInfo.other
            datas.finish=res.workAssignInfo.finish
            datas.overdues=res.workAssignInfo.overdue,
            datas.doing=res.taskNum.doing
            datas.wait=res.taskNum.wait
            datas.today=res.taskNum.today
            datas.overdue=res.taskNum.overdue
            // datas.messageNum=res.messageNum
            store.commit('setinfonmessga',1500)


            //   datas.finishRatio=res.workAssignInfo.finishRatio
            
         chartdatas.value= [
        { value: res.workAssignInfo.other, name: res.workAssignInfo.otherRatio+"%" },
        { value: res.workAssignInfo.overdue, name: res.workAssignInfo.overdueRatio+'%'},
        { value: res.workAssignInfo.finish, name: res.workAssignInfo.finishRatio+'%'},
    //     console.log(res.workAssignInfo.finishRatio)
        
      ]
      echarts.value.resultechart(chartdatas.value)
    //   console.log(chartdatas.value)
       
      
    //         console.log(datas)
            
        }) .catch(res => {
              console.log(res)
                ElMessage({
                    message: res,
                    type: 'error',
                })
            });

            //信息列表
             const homemessagedatas= ref({
            receiveUserId:localStorage.getItem('userinfoId'),
            readFlag:1,
            pageNo:1,
            pageSize:10,
            projectName:'',
        })
        console.log(homemessagedatas.value)

      getWorkMessagePage(homemessagedatas.value).then(res=>{
                console.log(res)
               homemessagedata.value=res.page.list
               messagenuncount.value=res.page.count
               messagelist.value=res.page.list.length
               
            }).catch(res => {
              console.log(res)
                ElMessage({
                    message: res,
                    type: 'error',
                })
            });    
      const activeright = ref(0)


     

            
       const options = reactive({})
       //选择项目的列表
       const projectxzlists=ref([])
       const identity=localStorage.getItem('identity')
      //   const identity = computed(()=>{
      //     return store.state.identity
      // })
    //    const identity = setTimeout(computed(()=>{
    //       return store.state.identity
    //   }),500) 
    const datassj=ref({
          userId:localStorage.getItem('userinfoId'),
          selectType:1,
          beginDate:'',
          endDate:'',
         })
      console.log('identity',identity.value)
      var now = new Date();
       var nowDayOfWeek = now.getDay() == 0 ? 6 : (now.getDay()-1)
       console.log('nowDayOfWeek',nowDayOfWeek)
       var timexjx=6-nowDayOfWeek
       datassj.value.beginDate = getDateStr(new Date(now.getTime() - nowDayOfWeek * 24 * 60 * 60 * 1000))
       datassj.value.endDate = getDateStr(new Date(now.getTime() + timexjx * 24 * 60 * 60 * 1000))
      const xuanzhondezx=ref('')
      if(identity==2){
          projectxzlists.value=['我创建的','我执行的','抄送给我的','全部项目']
           xuanzhondezx.value=projectxzlists.value[3]
           datassj.value.selectType=4
        //   console.log(' projectxzlists',projectxzlists.value)
      }
      if(identity==3){
          projectxzlists.value=['我创建的','抄送给我的','全部项目']
        //   console.log(' projectxzlists',projectxzlists.value)
          xuanzhondezx.value=projectxzlists.value[2]
          datassj.value.selectType=4
      }
      if(identity==1){
          projectxzlists.value=['我执行的','抄送给我的']
        //   console.log(' projectxzlists',projectxzlists.value)
          xuanzhondezx.value=projectxzlists.value[0]
          datassj.value.selectType=2
      }
      
       const choiceproject =(index)=>{
        activeright.value=-1
        console.log(index)
        console.log(projectxzlists.value)
         xuanzhondezx.value=projectxzlists.value[index]
          console.log(" xuanzhondezx.value", xuanzhondezx.value)
        //  console.log(xuanzhondezx.value)
         projectchoiceshows.value=false
        //  console.log('userid',localStorage.getItem('userinfoId'))
        
         if(identity==2){
          if(index==0){
          datassj.value.selectType=1
          huoqushuji(datassj.value)
         }else if(index==1){
          console.log(datassj.value)
          datassj.value.selectType=2
          huoqushuji(datassj.value)
         }else if(index==2){
          datassj.value.selectType=3
          huoqushuji(datassj.value)
         }else if(index==3){
          datassj.value.selectType=4
          huoqushuji(datassj.value)
         }
         }
         
         if(identity==3){
          if(index==0){
          datassj.value.selectType=1
          huoqushuji(datassj.value)
         }else if(index==1){
          console.log(datassj.value)
          datassj.value.selectType=3
          huoqushuji(datassj.value)
         }else if(index==2){
          datassj.value.selectType=4
          huoqushuji(datassj.value)
         }
         }
         if(identity==1){
          if(index==0){
          datassj.value.selectType=2
          huoqushuji(datassj.value)
         }else if(index==1){
          console.log(datassj.value)
          datassj.value.selectType=3
          huoqushuji(datassj.value)
         }
         }
         
         
       }
        const ativiproject=(index,item)=>{
        console.log(index,item)
        activeright.value=index
        console.log('datassj.value.selectType',datassj.value.selectType)
        if(identity==2){
          // 状态datassj.value.selectType为1 我创建的
          if(datassj.value.selectType==1){
          //  getWorkAssignDetails({userId:localStorage.getItem('userinfoId'),objId:item.id}).then(res=>{
          //  projectdetails.value.getdetail(res.projectDetails)
          //  })
           getProjectDetails({userId:localStorage.getItem('userinfoId'),objId:item.id}).then(res=>{
              console.log(res)
              // projectdetails.value.getdetail(res.projectDetails)
              projectmycreate.value.getdetail(res.projectDetails)
            })
               // 状态datassj.value.selectType为2 我我执行的
          }else if(datassj.value.selectType==2){
            //我执行的
           console.log(item)
            getWorkAssignDetails({userId:localStorage.getItem('userinfoId'),objId:item.id}).then(res=>{
              console.log(res)
              projectmyrw.value.getmessagedata(res.projectDetails)
          //  projectdetails.value.getdetail(res.projectDetails)
           })
            
          //  projectmycreate.value.getdetail(res.projectDetails)
          // 状态datassj.value.selectType为3 抄送我的
          }else if(datassj.value.selectType==3){

            projectmyrw.value.seecompleteproject(item.id)
           //全部的项目
        }else if(datassj.value.selectType==4){
              projectmyrw.value.seecompleteproject(item.id)
          //  projectdetails.value.getdetail(res.projectDetails)
          }
        }
        if(identity==3){
          // 状态datassj.value.selectType为1 我创建的
          if(datassj.value.selectType==1){
          //  getWorkAssignDetails({userId:localStorage.getItem('userinfoId'),objId:item.id}).then(res=>{
          //  projectdetails.value.getdetail(res.projectDetails)
          //  })
           getProjectDetails({userId:localStorage.getItem('userinfoId'),objId:item.id}).then(res=>{
              console.log(res)
              // projectdetails.value.getdetail(res.projectDetails)
              projectmycreate.value.getdetail(res.projectDetails)
            })
               // 状态datassj.value.selectType为2 我我执行的
          }else if(datassj.value.selectType==3){

            projectmyrw.value.seecompleteproject(item.id)
           //全部的项目
        }else if(datassj.value.selectType==4){
              projectmyrw.value.seecompleteproject(item.id)
          //  projectdetails.value.getdetail(res.projectDetails)
          }
        }
        if(identity==1){
          // 状态datassj.value.selectType为1 我创建的
          if(datassj.value.selectType==1){
          //  getWorkAssignDetails({userId:localStorage.getItem('userinfoId'),objId:item.id}).then(res=>{
          //  projectdetails.value.getdetail(res.projectDetails)
          //  })
           getProjectDetails({userId:localStorage.getItem('userinfoId'),objId:item.id}).then(res=>{
              console.log(res)
              // projectdetails.value.getdetail(res.projectDetails)
              projectmycreate.value.getdetail(res.projectDetails)
            })
               // 状态datassj.value.selectType为2 我我执行的
          }else if(datassj.value.selectType==3){

            projectmyrw.value.seecompleteproject(item.id)
           //全部的项目
        }
        }


      }
       //获取首页数据
       const huoqushuji=(data)=>{
        getWorkAssignInfo(data).then(res=>{
            console.log('首页数据', res)
            datas.allList=res.workAssignInfo.allList
            datas.overdueList=res.workAssignInfo.overdueList
            datas.finishList=res.workAssignInfo.finishList
            datas.alls=res.workAssignInfo.all
            datas.other=res.workAssignInfo.other
            datas.finish=res.workAssignInfo.finish
            datas.overdues=res.workAssignInfo.overdue
             chartdatas.value= [
        { value: res.workAssignInfo.other, name: res.workAssignInfo.otherRatio+"%" },
        { value: res.workAssignInfo.overdue, name: res.workAssignInfo.overdueRatio+'%'},
        { value: res.workAssignInfo.finish, name: res.workAssignInfo.finishRatio+'%'},
    //     console.log(res.workAssignInfo.finishRatio)
        
      ]
      echarts.value.resultechart(chartdatas.value)

         })
       }
       const choiceprojecttwo =()=>{
        // console.log(index)
        xuanzhondezx.value=2
        //  console.log(xuanzhondezx.value)
         projectchoiceshows.value=false
       }
       //项目选择显示隐藏
       const projectchoiceshows=ref(false)
       const projectchoiceshow=()=>{
          projectchoiceshows.value=!projectchoiceshows.value
       }
       const rqshow=ref(false)
       const clickrq=()=>{
        rqshow.value=!rqshow.value
       }
       const startdata=ref('')
       const enddata=ref('')
      //  const getNowMonthLast = () => {
      //     const date = new Date()
      //     const enddate = new Date(date.getFullYear(), date.getMonth() + 1, 0)
      //     return enddate
      // }
 console.log("datassj.value",datassj.value)
       const getdatafor=(index)=>{
        switch (index) {
          case 1:
              var now = new Date();
              var nowDayOfWeek = now.getDay() == 0 ? 6 : (now.getDay()-1)
              console.log('nowDayOfWeek',nowDayOfWeek)
              var timexjx=6-nowDayOfWeek
              
              
              datassj.value.beginDate = getDateStr(new Date(now.getTime() - nowDayOfWeek * 24 * 60 * 60 * 1000))
              datassj.value.endDate  = getDateStr(new Date(now.getTime() + timexjx * 24 * 60 * 60 * 1000))
            break;
          case 2:
              var now = new Date();
              var nowDay = now.getDate() - 1;
              console.log("nowDay",nowDay)
              
              // if(nowDay)
              
              datassj.value.beginDate = getDateStr(new Date(now.getTime() - nowDay * 24 * 60 * 60 * 1000));
              datassj.value.endDate = getDateStr(new Date(now.getFullYear(), now.getMonth() + 1, 0));
          break;
          case 3:
            
              
            var date = new Date();
            var year1 = date.getFullYear();
            // var firstMonth = year1 + '-' + '01' + '-' + '01';
            datassj.value.beginDate = getDateStr(new Date(year1, 0, 1));
            datassj.value.endDate  = getDateStr(new Date(year1 + 1, 0, 0));
          break; 
        
          default:
            break;
        }
        // console.log("datassj.value",datassj.value)
        

       }
       //确认选择确定
       const shaixuan=()=>{
        chartdatas.value= []
        echarts.value.resultechart(chartdatas.value)
        huoqushuji(datassj.value)
        
      
        rqshow.value=false
       }
       const qunxiao=()=>{
        rqshow.value=false
       }
      //  滚动盒子触底
      const handleScroll =(e)=>{
        let el = e.target
        //判断是否到达div容器底部
//           if(el.scrollTop+el.clientHeight>=el.scrollHeight){
// homemessagedatas.value.pageNo=parseInt(homemessagedatas.value.pageNo)+1
// console.log("页数",homemessagedatas.value.pageNo)
//  homemessagedata.value.forEach(element => {
//                   homemessagedata.value.push(element)
//                 });
//           }
//         return
       
       if(el.scrollTop+el.clientHeight>=el.scrollHeight){
       	// //控制页数
        //   this.pagesize=this.pagesize+1
        //   //调用后台接口
        //   this.getAuditRecipeList()
        //  const homemessagedatas= ref({
        //     receiveUserId:localStorage.getItem('userinfoId'),
        //     readFlag:1,
        //     pageNo:1,
        //     pageSize:10,
        //     projectName:'',
        // })
        console.log(Math.ceil(messagenuncount.value/homemessagedatas.value.pageSize))
        if(homemessagedatas.value.pageNo<Math.ceil(messagenuncount.value/homemessagedatas.value.pageSize)){
          
          homemessagedatas.value.pageNo=parseInt(homemessagedatas.value.pageNo)+1
         console.log('已到低')
         console.log("页数",homemessagedatas.value.pageNo)
          console.log("homemessagedatas.value",homemessagedata.value)
         getWorkMessagePage(homemessagedatas.value).then(res=>{
               
              //  homemessagedata.value=homemessagedata.value.push(res.page.list)

                res.page.list.forEach(element => {
                  homemessagedata.value.push(element)
                });
            }).catch(res => {
              console.log(res)
                ElMessage({
                    message: res,
                    type: 'error',
                })
            });  

        }

         
        }
      }
      
      return{
        messagelist,
        handleScroll,
        projectmycreate,
        projectmyrw,
        newmessage,
        seemessage,
        selectmessage,
        homemessagedatas,
        homemessagedata,
        datassj,
        shaixuan,
        qunxiao,
        getdatafor,
        getDateStr,
        startdata,
        enddata,
        rqshow,
        clickrq,
        projectxzlists,
        identity ,
        huoqushuji,
        choiceprojecttwo,
        projectchoiceshows,
        projectchoiceshow,
        xuanzhondezx,
        choiceproject,
        ativiproject,
        activeright,
        store,
        datas,
        chartdatas,
        clickEven,
        myprojeckxz,
        pojackclick,
        echarts,
        mynewsbt,
        mynewsbtsele,
        readmessage,
      }

    }

}
</script>

<style>
 .home-content{
    display: flex;
    justify-content: space-between;
 }
 .home-left{
    width: 824px;
    height: 1032px;
    margin-left: 107px;
 }
 
 .weather{
    display: flex;
    justify-content: space-between;
    align-items: center;
 }
 .weather-info{
    text-align: left;
 }
 .weather-info h5{
    font-size: 56px;
    font-weight: 500;
    padding-top: 58px;
 }
 .weather-info p{
    font-size: 32px;
    margin-top: 20px;
 }
 .weather-icon{
    margin-top: 58px;
    width: 140px;
    height: 140px;
 }
  .weather-icon img{
    width: 140px;
    height: auto;
 }
 .project{
    width: 100%;
    margin-top: 50px;
 }
 .project h2{
    font-size: 24px;
 }
 .project-content{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 32px;
    /* box-shadow: 0px 8px 48px 0px rgba(1, 7, 19, 0.15); */
 }
 .project-progress{
    width: 200px;
    height: 156px;
    background: #020113;
    /* box-shadow: 0px 8px 48px 0px rgba(1, 7, 19, 0.15); */
    border-radius: 38px;
    text-align: center;
    padding-top: 16px;
 }
 .project-progress h1{
    width: 100%;
    height: 72px;
    font-size: 48px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 72px;
    text-align: center;
 }
 .project-progress p{
    width: 100%;
    font-weight: 400;
    color: #868484;
    font-size: 18px;
    
 }
 .project-progress div{
    width: 96px;
    height: 8px;
    border-radius: 4px;
    margin: 0 auto;
    margin-top: 20px;
 }
 .project-content-conduct div{
    background: #38BD29;
 }
 .project-content-examine div{
    background: #5BC1F9
 }
 .project-content-expire div{
    background: #FFC522;
 }
 .project-content-overdue div{
    background: #FF5300;
 }
 .c-news{
    width: 824px;
    margin-top: 55px;
    overflow: hidden;
 }
 .c-news-title{
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 31px;
 }
 .c-news-title h1{
    font-size: 24px;
 }
 .c-news-title-bt ul{
    display: flex;
    background: white;
    border-radius: 20px;
    width: 273px;
    height: 40px;
    justify-content: center;
    align-items: center;
 }
  .c-news-title-bt ul li{
    width: 92px;
    height: 36px;
    line-height: 36px;
    text-align: center;
    border-radius: 20px;
    font-weight: 400;
    font-size: 18px;
    color: #020113;
 }
 .c-news-title-bt ul .secelt{
    background: #020113;
    color: white;
 }
 
 .c-news-content{
    width: 824px;
    height: 132px;
    
    /* box-shadow: 0px 8px 48px 0px rgba(1, 7, 19, 0.2); */
    border-radius: 32px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
 }
 .c-news-content-tori{
    display: flex;
    justify-content: left;
    align-items: center;
 }
  .c-news-content-tori img{
    width: 81px;
    height: 81px;
    margin-left: 40px;
    border-radius: 50%;
 }
  .c-news-content-tori div{
    margin-left: 16px;
 }
  .c-news-content-tori div h1{
    font-size: 18px;
    font-weight: bold;
    line-height: 28px;
 }
 .c-news-content-tori div p{
    font-size: 14px;
    font-weight: 400;
    color: #A4A5AB;
    line-height: 22px;
    padding-top: 8px;
 }
 .c-news-content-newmegss{
    width: 132px;
    height: 132px;
    position: relative;
 }
 .c-news-content-newmegss span{
    width: 5px;
    height: 5px;
    
    display: block;
    margin: 2px;
    border-radius: 100%;
 }
 .c-news-content-d {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 .c-news-content-unmessage{
    position: absolute;
    width: 10px;
    height: 10px;
    background: #FF5300;
    border-radius: 100%;
    top: 16px;
    right: 20px;
 }
 .be-overdue .c-news-content-newmegss span{
    background-color: white;
 }
  .be-overdue .c-news-content-text h1{
    color: #FFFFFF;
 }
  .be-overdue{
    background: #020113;
 }
  .distribution .c-news-content-newmegss span{
    background-color: #000000;
 }
 .distribution .c-news-content-text h1{
    color: #020113 ;
 }
  .distribution{
    background: white;
 }
 .c-news-content-gd{
    width: 850px;
    height: 450px;
    /* background: white;; */
    overflow: hidden;
    overflow-y: auto;
 }
 /* .c-news-content-gd::-webkit-scrollbar {
    display: none;
} */
.c-news-content-gd::-webkit-scrollbar { 
        width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
        height:0px;
    }
  .c-news-content-gd::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(0,0,0,0.2);
    }
  .c-news-content-gd::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 0;
        background: rgba(0,0,0,0.1);
   }

   .home-right{
    width: 506px;
    height: 926px;
    background: white;
    border-radius: 48px;
    margin-left: 140px;
    margin-top: 130px;
    overflow: hidden;
  }
  .week-project-title{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    margin-left: 40px;
    align-items: center;

  }
  .week-project-title h1{
    width: 96px;
    height: 36px;
    font-size: 24px;
    font-weight: bold;
    color: #020113;
    line-height: 36px;
  }
  /* .week-project-title div{
    width: 32px;
    height: 32px;
    margin-right: 43px;
  } */
  .week-prohect-tops{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
  }
  .data1{
    font-size: 18px;
    width: 406px;
    height: 48px;
    line-height: 48px;
    background: #FFFFFF;
    box-shadow: 0px 8px 48px 0px rgba(1,7,19,0.0500);
    border-radius: 16px;
    opacity: 0.5;
    border: 2px solid #020113;
    margin: 0 auto;
    margin-top: 33px;
  }
  .xz-rq-data{
    width: 100%;
    height: 100%;
    z-index: 99;
    position: fixed;
    top: 0px;
    left: 0;
    padding: 10px;
    text-align: center;
    color: #000000;
    background: #FFFFFF;
    box-shadow: 0rem 0.04167rem 0.25rem 0rem rgb(1 7 19 / 15%);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #020113c3;
/* opacity: 0.8; */
  }
   .xz-rq-data-k{
    width: 517px;
    height: auto;
    top: 0px;
    left: 0;
    width: auto;
    height: auto;
    padding: 10px;
    text-align: center;
    color: #000000;
    box-shadow: 0rem 0.04167rem 0.25rem 0rem rgb(1 7 19 / 15%);
  }
  .xz-rq-data-k-text{
    width: 517px;
    height: 72px;
    background: #020113;
    box-shadow: 0px 8px 48px 0px rgba(1,7,19,0.1500);
    border-radius: 32px 32px 0px 0px;
    text-align: center;
    line-height: 72px;
    color: white;
    font-size: 24px;
  }

  .xz-rq-data-k-nr{
    width: 517px;
    height: 448px;
    background: #FFFFFF;
    box-shadow: 0px 8px 48px 0px rgba(1,7,19,0.1500);
    border-radius: 32px;

  }
  .querenrq{
    font-size: 24px;
    width: 356px;
    height: 48px;
    background: #FFFFFF;
    box-shadow: 0px 8px 48px 0px rgba(1,7,19,0.0500);
    border-radius: 28px;
    text-align: center;
    line-height: 48px;
    margin: 0 auto;
    margin-top: 40px;
  }
  .quxiaorq{
    width: 356px;
    height: 48px;
    font-size: 24px;
    box-shadow: 0px 8px 48px 0px rgba(1,7,19,0.0500);
    border-radius: 28px;
    text-align: center;
    line-height: 48px;
    border: 2px solid #FFFFFF;
    margin: 0 auto;
    margin-top: 40px;
    color: white;
  }
  .data-start{
    width: 195px;
    height: 48px;
  }
  
  .end-start{
    width: 195px;
    height: 48px;
  }
  .week-prohect-listod{
    position: relative;
    width: 216px;
    height: 40px;
border-radius: 16px;
line-height: 40px;
border: 2px solid #020113;
margin-right: 24px;
  }
  .week-genhuang-text{
    position: absolute;
  }
  .week-genghuan{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
font-weight: bold;
color: #020113;
line-height: 40px;
  }
  .week-genghuan span{
    
    margin-right: 20px;
  }
   .week-genghuan img{
    width: 32px;
    height: 32px;
  }
  .week-project-title .week-prohect-tops img{
    width: 32px;
    height: auto;
  }
  .week-genhuang-text{
    width: 216px;
height: auto;
background: #FFFFFF;
box-shadow: 0px 8px 48px 0px rgba(1,7,19,0.1500);
position: absolute;
z-index: 10;
font-size: 22px;
font-weight: bold;
color: #000000;
line-height: 42px;
top: 55px;
box-sizing: border-box;
padding: 0 20px;
  }
  .week-echart-sj{
    padding: 20px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .week-mydid,.week-myprojects{
    height: 85px;
    padding-left: 5px;
    line-height: 85px;
    border-bottom: 2px solid #D8D8D8;
    /* text-align: center; */
  }
  
  .week-echart-xmlx-tk{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 191px;
    height: 48px;
    background: #FFFFFF;
    border: 1px solid #020113;
    color: #000000;
    margin: 10px;
    /* box-shadow: 0px 8px 48px 0px rgba(1, 7, 19, 0.15); */
    border-radius: 16px;
    opacity: 0.9;
  }
  

  /* 选中 */
  .xmk-scetl-bj{
    background: #020113;
    color: #FFFFFF;
  }
  .week-echart-xmlx{
    margin-right: 36px;
  }
  
  .week-echart-xmlx .week-echart-xmlx-tk:nth-child(1) .week-echart-xmlx-mc span{
    background: red;
  }
  .week-echart-xmlx .week-echart-xmlx-tk:nth-child(2) .week-echart-xmlx-mc span{
    background: #FA7330;
  }
  .week-echart-xmlx .week-echart-xmlx-tk:nth-child(3) .week-echart-xmlx-mc span{
    background: #59B850;
  }
 .week-echart-sj .week-echart-xmlx .week-echart-xmlx-tk .week-echart-xmlx-mc .xmk-scetl-yd{
   background: white;
  }
  
  .week-echart-xmlx-tk .week-echart-xmlx-mc {
    height: 25px;
    font-size: 18px;
    /* font-family: SourceHanSansCN-Regular, SourceHanSansCN; */
    font-weight: 400;
    line-height: 28px;
    display: flex;
    align-items: center;

  }
   .week-echart-xmlx-tk .week-echart-xmlx-nun{
    width: 32px;
    height: 29px;
    font-size: 24px;
    /* font-family: SourceHanSansCN-Heavy, SourceHanSansCN; */
    font-weight: 800;
    line-height: 29px;
    margin-right: 23px;
  }
   .week-echart-xmlx-tk .week-echart-xmlx-mc span{
    width: 10px;
    height: 10px;
    border-radius: 100%;
    /* background-color: #000000; */
    display: block;
    margin-left: 16px;
    margin-right: 8px;
  }
  .week-echart-k-gd{
    width: 550px;
    height: 520px;
    /* margin-top: 64px; */
    overflow: hidden;
    overflow-y: auto;

  }
  .week-echart-k{
    width: 458px;
    height: 92px;
    border-radius: 32px;
    border: 2px solid #A9ABB4;
    margin-left: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .week-echart-k-title{
    margin-left: 40px;
  }
  .week-echart-k-title h1{
    height: 28px;
    font-size: 18px;
    font-weight: bold;
    color: #020113;
    line-height: 28px;
  }
  .week-echart-k-title p{
    height: 22px;
    font-size: 14px;
    font-weight: 400;
    color: #878994;
    line-height: 22px;
    margin-top: 4px;
  }
   .week-echart-k-img img{
    width: 50px;
    height: 50px;
  }
  .week-echart-k-secelt{
    background-color: #020113;
  }
  .week-echart-k-title .week-echart-k-secelt-h1{
    color: #FFFFFF;
  }
  .week-echart-k-title .week-echart-k-secelt-p{
    color: #7A7B87;
  }
  
  .week-echart-bg{
    width: 250px;
    height: 250px;
  }
  .time-huanxian{
    font-size: 18px;
  }
 .data-start .el-icon svg, .end-start .el-icon svg {
    height: 25px;
    width: 25px;
}
.data-start .el-input__inner{
  font-size: 15px;
}
.end-start .el-input__inner{
font-size: 15px;
}
.end-start .el-date-editor.el-input, .el-date-editor.el-input__wrapper,.data-start .el-date-editor.el-input, .el-date-editor.el-input__wrapper{
  width: 100%;
  height: 100%;
}
.end-start .el-input__wrapper,.end-start .el-input__wrapper{
  padding: 1px 11px;
}
.data-sore{
  width: 406px;
  height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  margin-top: 32px;
}
.datas-wu{
  width: 506px;
  height: auto;
  text-align: center;
}
.datas-wu img{
  width: 320px;
  height: 268px;
  margin: 0 auto;
}
.datas-wu-text{
  font-size: 24px;
font-weight: 400;
color: #B3B2B8;
line-height: 36px;
margin: 0 auto;
}
.message-wu{
  width: 320px;
  height: 268px;
  margin: 0 auto;
}
.message-wu img{
  width: 320px;
  height: 268px;
}
.datas-wu-text{
  text-align: center;
}


  







</style>